<template>
  <div class="login">
    <div class="user">
      <input type="text" v-model="userName" placeholder="请输入用户名" />
    </div>
    <div>
      <input type="password" v-model="password" placeholder="请输入密码" />
    </div>
    <p class="tips" v-if="isTips">{{ tips }}</p>
    <div class="login-btn">
      <button @click="login">登录</button>
    </div>
    <p class="enroll">
      <router-link to="/homes/my/enroll">在线注册</router-link>
    </p>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      userName: "",
      password: "",
      tips: "",
      isTips: false,
    };
  },
  props: ["xinxi"],
  methods: {
    login() {
      if (this.userName.length > 0 && this.password.length > 0) {
        if (this.xinxi.length == 0) {
          this.tips = "用户名或密码错误";
          this.isTips = true;
        }
        this.xinxi.forEach((item) => {
          if (
            this.password == item.password &&
            this.userName == item.userName
          ) {
            // console.log("成功");
            this.$router.push({
              name: "my",
              params: { userName: this.userName },
            });
          } else {
            this.tips = "用户名或密码错误";
            this.isTips = true;
          }
        });
      } else {
        this.tips = "输入框不能为空";
        this.isTips = true;
      }
    },
  },
};
</script>

<style lang='scss' scoped>
@import "@/static/common/base.scss";

.login {
  width: 80%;
  height: 70vw;
  border: 1px solid $bgc;
  margin: 0 auto;
  border-radius: 10vw;
  background-color: #ff93a6;
  position: absolute;
  top: 30%;
  left: 10vw;

  animation-name: loginInto;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  // animation-iteration-count: infinite;
  .tips {
    color: red;
    text-align: center;
  }
  div {
    width: 70%;
    margin: 5vw auto;
    input {
      border: 1px solid $bgc;
      border-radius: 5vw;
      height: 10vw;
      padding-left: 5vw;
    }
    button {
      border: 0;
      height: 10vw;
      width: 24vw;
      background-color: #fff;
      border-radius: 10vw;
    }
  }
  .login-btn {
    width: 24vw;
    height: 10vw;
  }
  .user {
    margin-top: 8vw;
  }
  .enroll {
    display: block;
    // width: 24vw;
    height: 10vw;
    margin: 0 auto;
    text-align: right;
    padding-right: 5vw;
    a {
      color: #fff;
    }
  }
}
@keyframes loginInto {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
</style>